<template>
  <div class="decoration__page2">
    <!-- <el-button
      style="marginBottom:20px;padding:10px 30px"
      type="primary"
      @click="addTemplate()"
      >新增空白模板</el-button
    >-->
    <!-- 自定义模板 -->
    <div class="decoration__page">
      <div
        class="usercenter"
        v-for="(item, index) in templateList"
        :key="item.id"
        v-if="index == 0"
      >
        <div class="m_title">{{ item.name ? item.name : "默认模板" }}</div>
        <div class="user">
          <!-- <div class="user__radius">
            <div class="topBar">
              <div class="topBar__one">
                <span>{{ now }}</span>
                <span>
                  <i class="el-icon-share" />
                </span>
              </div>
            </div>
          </div>
          <div style="marginTop: 530px;" class="user__cover">
            <div class="bottom_bar">
              <div v-for="(item,index) in menuList"
                                :key="item.id">
                            <div class="bottom_bar_item">
                                <img :class="(formData.codeStyle==2&&(menuList.length==1||(menuList.length==2 &&index==1)||(menuList.length==3 &&index==1)||(menuList.length>3&&index==2)))? 'bottom_bar_item_icon_big':'bottom_bar_item_icon'" src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/api/1.png" >
                                <span class="bottom_bar_item_text">{{item.menuName}}</span>
                            </div>
              </div>
            </div>
          </div>-->
          <div class="p_template_wrap">
            <div class="p_template">
              <img src="@/assets/images/decoration/moudle.png" width="100%" />
            </div>
          </div>
          <!-- 蒙层 -->
          <div class="fullbg">
            <!-- <el-button style="marginLeft:0px;marginTop:20px;padding:10px 30px" type="primary" @click="emptyUse(item)">使用</el-button> -->
            <el-button
              style="marginLeft:0px;marginTop:20px;padding:10px 30px"
              type="primary"
              @click="toggleEditor(item)"
              >装修</el-button
            >
            <!-- <el-button
              style="marginLeft:0px;marginTop:20px;padding:10px 30px"
              type="primary"
              @click="deleteTemplate(item)"
            >删除</el-button>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import {
  addTemplate,
  getdefTemplate,
  deleteTemplate,
} from "@/api/decoration/decoration";
import UploadFile from "@/views/decoration/components/NavBar/UploadFile.vue";
import Editor from "@/views/decoration/components/EditorPage";
@Component({
  components: {
    UploadFile,
    Editor,
  },
})
export default class Page extends Vue {
  /** 模板列表 */
  templateList: any[] = [];

  /** 显示编辑页面 */
  editorVisible = false;

  mounted() {
    this.init();
  }

  /** 初始化切换tab可调 */
  init() {
    this.getTemplateList();
  }

  /** 监听弹窗，弹窗时调用获取模板 */
  @Watch("editorVisible", { immediate: true })
  editorVisibleChange() {
    if (this.editorVisible) {
      this.getTemplateList();
    }
  }

  /** 点击使用模板 */
  async emptyUse(item) {
    item.onlineStatus = 1;
    const res = await addTemplate(item);
    try {
      if (res.code === 200) {
        this.$message.success(`使用模板成功`);
        this.getTemplateList();
      } else {
        this.$message.warning(`使用模板失败`);
      }
    } catch (err) {
      this.$message.warning(err || "使用模板失败");
    }
  }

  /** 装修模板 */
  toggleEditor(item) {
    this.$router.push({ path: "/editorPage" });
    this.$store.dispatch("decoration/updateTemplateId", item.id);
    this.$emit("hideDialog");
  }

  /** 删除模板 */
  async deleteTemplate(item) {
    const data = {
      ids: item.id,
    };
    const res = await deleteTemplate(data);
    try {
      if (res.code === 200) {
        this.$message.success(`删除成功`);
        this.getTemplateList();
      } else {
        this.$message.warning(`删除失败`);
      }
    } catch (err) {
      this.$message.warning(err || "删除模板失败");
    }
  }

  /** 添加默认模板 */
  async addTemplate() {
    const addData = {
      isDevTemplate: 1,
      type: 1,
      onlineStatus: 0,
      name: "商超模板",
    };
    const res = await addTemplate(addData);
    try {
      if (res.code === 200) {
        this.$message.success(`新增模板成功`);
        this.getTemplateList();
      } else {
        this.$message.warning(`添加模板失败`);
      }
    } catch (err) {
      this.$message.warning(err || "操作失败");
    }
  }

  /** 获取默认模板列表 */
  async getTemplateList() {
    const getPageListData = {
      isDevTemplate: 1, // 0自定义模板 1默认模板
    };
    const res = await getdefTemplate(getPageListData);
    try {
      if (res.code === 200) {
        this.templateList = res.data;
      } else {
        this.$message.warning(`获取数据失败`);
      }
    } catch (err) {
      this.$message.warning(err || "操作失败");
    }
  }

  /** 获取当前时间 */
  get now() {
    const date = new Date();
    const hour = date.getHours() > 9 ? date.getHours() : "0" + date.getHours();
    const minutes =
      date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
    const now = `${hour}:${minutes}`;
    return now;
  }

  /** 获取设置 */
  async getAllSetting() {
    // const result = await getUserCenterConfig();
    // const {code, data} = result;
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/decoration/module";
</style>
